<template>
  <section class='f-order'>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="overflow-y: auto;flex:1">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="f-card-list" v-for="(item, index) in tableData" :key="index" @click="toDetail(item)">
          <div class="f-title">
            <p>{{item.iccid || '--'}}</p>
            <p style="font-weight: 100;font-size: 11px;">{{getDateTime(item.createTime)[6]}}</p>
          </div>
          <section class="f-content">
            <div class="g-flex-ct">
              <img style="width: 42px;height: 42px;" src="@/assets/icons/icon_order.png" alt="">
              <div style="margin-left: 8px;">
                <p>{{item.packageName}}</p>
                <p class="f-mt-05" style="font-size: 10px;color: #666666;">数量：{{item.buyNum}}</p>
              </div>
            </div>
            <p style="font-size: 14px;color: #FF3F3F;">¥ {{ (item.payMoney/100).toFixed(2) }}</p>
          </section>
        </section>
      </van-list>
    </van-pull-refresh>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../../api'
import { getDateTime, getStore } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      searchForm: {
        "endTime": "",
        iccid: getStore('cardCorrelation').yklIccid,
        "orderBy": "",
        "page": 1,
        "size": 10,
        "startTime": ""
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '订购记录(国际)',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: '',
      });
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.yklCardOrder(json).then(res => {
        state.refreshing = false

        if (res.data.list.length) state.searchForm.page += 1
        state.tableData.push(...res.data.list)

        // 防止触发两次
        if (state.tableData.length >= res.data.total) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const toDetail = (data) => {
      router.push({
        path: "/outChina/rechargeRecordDetail",
        query: {
          sysOrderId: data.sysOrderId
        }
      })
    }

    return {
      ...toRefs(state),
      getDateTime,
      onLoad,
      onRefresh,
      toDetail
    }
  }
}
  </script>
  
<style lang='scss' scoped>
.f-order {
  display: flex;
  flex-direction: column;
  padding: 19px 14px;
  .f-card-list {
    background: #ffffff;
    border-radius: 13px;
    padding: 18px 15px 23px 14px;
    margin-bottom: 14px;
    .f-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #424242;
    }
    .f-content {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
    }
  }
}
</style>